<template>
    <div class="main_wrap" style="height: 100%;">

   
    <div class="wrap">
        <div class="box"></div>
        <span class="text">{{ _percent }}%</span>
    </div>
    <div class="info">
        <span>系统升级中（下载速度：{{_speed}}kb/s），下载完毕后会自动重新启动</span>
       
    </div>
</div>
</template>
<script setup lang='ts'>
//@ts-nocheck
import {useRouter} from 'vue-router'
import { ref } from 'vue'
import gsap from 'gsap';
const router = useRouter()
import { onMounted } from 'vue';

const _percent = ref(0)
const _speed = ref(0)

onMounted(() => {

    window.electron.ipcRenderer.on('downloading', (_, { speed, percent }) => {
        console.log({ speed, percent })
        _speed.value = speed
        _percent.value = percent
        gsap.to(".box", { top: 100 - percent + '%' })
    })

    window.electron.ipcRenderer.on('downloaded', () => {
        console.log('下载已完成,请退出程序 并重新安装')
    })
})

</script>
<style>

</style>
<style scoped lang="scss">

.wrap {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    border: 4px solid #fff;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

}

.box {
    position: absolute;

    width: 350px;
    height: 350px;
    border-radius: 150px;
    background-color: rgb(48, 117, 237);
    top: 100%;
    left: 50%;
    margin-left: -50%;
    /* transform:  rotate(45deg); */
    animation: wave 5s linear infinite;
    transform-origin: center;



}

@keyframes wave {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.text {
    color: #000;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.info{
    position: absolute;
    bottom: 30px;
    left: 50%;
    color: #fff;
    transform: translateX(-50%);
}
</style>
